<template>
  <div id="productlist">
    <!-- 筛选添加 区域 -->
    <div class="headerbar">
      <el-form label-width="120px" :v-model="seachModel" ref="form">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span> <i class="el-icon-search"></i>筛选搜索</span>
            <div style="float: right;">
              <el-button style=" padding: 5px 10px">重置</el-button>
              <el-button style=" padding: 5px 10px" type="primary" @click="handSearch">查询结果</el-button>
            </div>
          </div>
          <div class="secherbox">
            <el-row type="flex" class="row-bg" justify="space-around">

              <el-col :span="6">
                <div class="grid-content ">
                  <el-form-item label="搜索名称：">
                    <span></span>
                    <el-input v-model="seachModel.name" placeholder="商品名称"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content ">
                  <el-form-item label="商品货号：">
                    <span></span>
                    <el-input v-model="seachModel.productnum" placeholder="商品货号"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content">
                  <el-form-item label="商品分类：">
                    <el-select v-model="seachModel.branid" placeholder="请选择">
                      <el-option v-for="(item,index) in options" :key="index" :label="item.pcName" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="space-around">
              <el-col :span="6">
                <div class="grid-content ">
                  <el-form-item label="商品品牌：">
                    <span></span>
                    <el-select v-model="seachModel.branid" placeholder="请选择品牌">
                      <el-option v-for="(item,index) in brand" :key="index" :label="item.brandName" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content">
                  <el-form-item label="上架状态：">

                    <el-cascader :options="options" clearable placeholder="全部"></el-cascader>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content ">
                  <el-form-item label="审核状态：">
                    <span></span>
                    <el-cascader :options="options" clearable placeholder="全部"></el-cascader>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

          </div>
        </el-card>
      </el-form>
    </div>

    <!-- 数据列表内容 -->
    <div class="content-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i>数据列表</span>
          <el-button style="float: right; padding: 5px 10px">添加</el-button>
        </div>
        <el-table tooltip-effect="dark" style="width: 100%; " :data="tabtiile" border>

          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="编号" show-overflow-tooltip align="center" prop="id">

          </el-table-column>
          <el-table-column label="商品图片" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <img :src="scope.row.imgs" alt="">
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center" width='130px'>
            <template slot-scope="scope">
              <p>{{scope.row.seach}} </p>

              <p>品牌：{{scope.row.name}}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <p> 价格:￥{{scope.row.price}}</p>
              <p>货号: {{scope.row.ItemNo}}</p>
            </template>
          </el-table-column>

          <el-table-column prop="address" label="标签" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch inactive-text="上架" v-model="scope.row.upon">
              </el-switch>
              <p>
                <el-switch inactive-text="新品" v-model="scope.row.Newproduct">
                </el-switch>
              </p>
              <p>
                <el-switch inactive-text="推荐" v-model="scope.row.recommend">
                </el-switch>
              </p>
            </template>

          </el-table-column>
          <el-table-column prop="Sort" label="排序" align="center" show-overflow-tooltip>

          </el-table-column>
          <el-table-column label="SKU库存" align="center" show-overflow-tooltip>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </el-table-column>
          <el-table-column prop="address" label="销量" align="center" show-overflow-tooltip>
            0
          </el-table-column>
          <el-table-column prop="address" label="审核状态" align="center" show-overflow-tooltip>
            <p>
              <el-link>未审核</el-link>
            </p>
            <p>
              <el-link type="primary">审核详情</el-link>
            </p>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center" show-overflow-tooltip>
            <p>
              <el-button size="mini">查看</el-button>
              <el-button size="mini">编辑</el-button>
            </p>
            <p>
              <el-button size="mini">日志</el-button>
              <el-button size="mini" type="danger" @click="delectEmp">删除</el-button>
            </p>
          </el-table-column>



        </el-table>
        <div style="display:flex;justify-content:flex-end">
          <el-pagination background @current-change="currentChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
          </el-pagination>

        </div>


      </el-card>

    </div>
  </div>
</template>

<script>
  export default {
    name: "ProductAdd",
    data() {
      return {
        tabtiile: [],
        vague:[],
        total: 0, //页码
        page: 1,
        size: 5,
        input: '',
        value: '',
        showProductList: [], //显示的商品集合
        options: [], //分类列表
        brand: [],
        seachModel: { //表单model
          name: '',
          productnum: '',
          categoryId: '',
          branid: '',
          isSale: '',
          isRecoment: '',
        }
      }
    },

    created() {
      this.axios.get("http://localhost:3030/productLisy_page=1&_limit=5")
        .then(res => {
          this.tabtiile = res.data
          this.total = res.data.length //页码长度

          this.axios.get("http://localhost:3030/brand")
            .then(res => {
              this.brand = res.data
              console.log(this.brand)
              outer:
                for (let i = 0; i < this.tabtiile.length; i++) {
                  let brandId = this.tabtiile[i].branid;
                  //循环品牌列表
                  for (let j = 0; j < this.brand.length; j++) {
                    let id = this.brand[j].id;
                    if (brandId == id) {
                      this.tabtiile[i].brandName = this.brand[j].brandName
                      continue outer
                    }

                  }
                }
              console.log(this.tabtiile);
            })



        }),

        this.axios.get("http://localhost:3030/productCategory")
        .then(res => {
          this.options = res.data


        })
        .catch(err => {
          console.error(err);
        })
    },
    mounted () {
      this.axios.get('http://localhost:3030/productLisy?name_like=华为')
      .then(res => {
      this.vague=res.data
          console.log(res)
      
      })
      .catch(err => {
          console.error(err); 
      })  
    },
    methods: {
      handSearch() {
        this.showProductList = this.tabtiile.filter((value) => {
          for (const key in this.seachModel) {
            if (this.seachModel[key] != '') {
              if ((key == 'name' && value[key].indexOf(this.seachModel[key]) == -1) ||
                (key != 'name' && this.seachModel[key] != value[key])) {
                return false
              }
            }

          }
          return true

        })
        console.log(this.showProductList);

      },

    },


  };
</script>

<style lang="less" scoped>
  #productlist {
    .headerbar {
      .text {
        font-size: 14px;
      }

      .item {
        margin-bottom: 18px;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both;
      }

      .box-card {
        width: 100%;
      }
    }

    .secherbox {
      .el-row {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;

        }
      }

      .el-col {
        border-radius: 4px;
      }

      .grid-content {
        border-radius: 4px;
        min-height: 36px;
        display: flex;
        justify-content: space-around;
        line-height: 36px;
      }

      .row-bg {
        padding: 10px 0;

      }
    }

    .content-box {
      color: #99a9bf;
    }

  }
</style>
